<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>mtdnr - jquery拖放插件</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.mtdnr.js"></script>
</head>
<style> *{
    font: 12px/1.5 'Tahoma', 'simsun' ;
}</style>
<body>

<div class="fordrag" style="position: absolute; border: 1px #f4a460 solid; top:50%; width:300px; height:200px; background-color: #d0d0d0;">
    <h1 class="drag" style="height: 50px;cursor: move; background-color: #3365AD; ">控制条</h1>
    被控区域<br />
    被控区域<br />
    被控区域<br />
    被控区域<br />
    被控区域<br />
    被控区域<br />
</div>

<a href="jquery.mtdnr.js">下载jquery.mtdnr.js</a>
<br />
用法：
<pre>
    &lt;div class="fordrag" style="position: absolute; cursor: move; border: 1px #f4a460 solid;"&gt;
        &lt;h1 class="drag" style="height: 40px;"&gt;控制条&lt;/h1&gt;
        被控区域&lt;br /&gt;
        被控区域&lt;br /&gt;
        被控区域&lt;br /&gt;
        被控区域&lt;br /&gt;
        被控区域&lt;br /&gt;
    &lt;/div>
</pre>
<script>
    $(function()
    {
        $('.drag').mtDrag('.fordrag');
    });
</script>
</body>
</html>